@import '~@common/css/_variables.scss';

.catGroup {
  position: absolute;
  top: 290px;
  left: 30px;
  z-index: 50;
  width: 740px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 0 10px 0 rgba($color: #e5e5e5, $alpha: 1);

  .all {
    padding: 0 30px;
    line-height: 60px;
    cursor: pointer;
    border-bottom: 1px solid #e5e5e5;
  }

  .alone {
    display: flex;
    padding: 0 20px 15px;

    p {
      width: 120px;
      padding-top: 25px;
      font-weight: 200;
      color: #989898;
    }

    ul {
      display: flex;
      flex: 1;
      flex-wrap: wrap;

      li {
        width: 16.6666%;
        padding-top: 25px;

        &.active {
          color: $color;
        }

        &.hover {
          color: $color;
        }

        span {
          cursor: pointer;

          &.isHot {
            position: relative;

            &::after {
              position: absolute;
              top: 0;
              right: -20px;
              font-size: 10px;
              color: $color;
              content: 'HOT';
            }
          }
        }
      }
    }
  }
}
